<template>
  <div class="container mx-auto px-4 py-8">
    <!-- 页面头部 -->
    <header class="mb-8">
      <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-center">我的HTML学习笔记</h1>
    </header>

    <!-- 导航栏 -->
    <nav class="mb-8 bg-gray-100 rounded-lg p-4 shadow-sm">
      <div class="flex flex-wrap justify-center gap-4">
        <router-link to="/" class="px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">首页</router-link>
        <router-link to="/about" class="px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">关于</router-link>
        <router-link to="/contact" class="px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">联系</router-link>
      </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- 文章内容 - 占2/3宽度 -->
      <div class="lg:col-span-2 space-y-8">
        <article class="bg-white rounded-xl shadow-md overflow-hidden">
          <!-- 章节1 -->
          <section class="p-6 border-b border-gray-100">
            <h2 class="text-2xl font-bold mb-4">HTML基础学习</h2>
            <p class="mb-4">
              <strong>HTML</strong>（超文本标记语言）是构建网页的基础。通过学习HTML，我了解了网页的基本结构和元素。
              <em class="italic">语义化标签</em>的使用让代码更具可读性，例如使用header、nav、main等标签来组织内容。
            </p>
            <p>
              在学习过程中，我发现<mark class="bg-yellow-200 px-1 rounded">MDN Web Docs</mark>是一个非常有用的资源，它提供了详细的HTML文档和示例。
              <br>我还学会了如何使用特殊字符，比如在版权信息中使用©符号。
            </p>
          </section>

          <!-- 章节2 -->
          <section class="p-6">
            <h3 class="text-xl font-bold mb-4">学习成果</h3>

            <!-- 无序列表 -->
            <div class="mb-6">
              <h4 class="text-lg font-semibold mb-2">知识点列表</h4>
              <ul class="list-disc pl-6 space-y-2">
                <li class="hover:text-blue-600 transition-colors">语义化标签的使用</li>
                <li class="hover:text-blue-600 transition-colors">表单元素与验证</li>
                <li class="hover:text-blue-600 transition-colors">响应式设计基础</li>
              </ul>
            </div>

            <!-- 有序列表 -->
            <div class="mb-6">
              <h4 class="text-lg font-semibold mb-2">学习步骤</h4>
              <ol class="list-decimal pl-6 space-y-2">
                <li class="hover:text-green-600 transition-colors">掌握基本标签和结构</li>
                <li class="hover:text-green-600 transition-colors">学习表单和多媒体元素</li>
                <li class="hover:text-green-600 transition-colors">实践响应式设计</li>
              </ol>
            </div>

            <!-- 描述列表 -->
            <div>
              <h4 class="text-lg font-semibold mb-2">术语定义</h4>
              <dl class="space-y-4">
                <div class="bg-gray-50 p-3 rounded-lg">
                  <dt class="font-semibold text-blue-600">HTML</dt>
                  <dd>超文本标记语言，用于创建网页结构</dd>
                </div>
                <div class="bg-gray-50 p-3 rounded-lg">
                  <dt class="font-semibold text-blue-600">CSS</dt>
                  <dd>层叠样式表，用于美化网页</dd>
                </div>
                <div class="bg-gray-50 p-3 rounded-lg">
                  <dt class="font-semibold text-blue-600">JavaScript</dt>
                  <dd>用于实现网页交互功能的编程语言</dd>
                </div>
              </dl>
            </div>
          </section>
        </article>

        <!-- 表格部分 -->
        <section class="bg-white rounded-xl shadow-md overflow-hidden">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-4">HTML版本历史</h3>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">HTML版本</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发布时间</th>
                </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-6 py-4 whitespace-nowrap">HTML 4.01</td>
                  <td class="px-6 py-4 whitespace-nowrap">1999年12月</td>
                </tr>
                <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-6 py-4 whitespace-nowrap">HTML5</td>
                  <td class="px-6 py-4 whitespace-nowrap">2014年10月</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </section>
      </div>

      <!-- 侧边补充信息 - 占1/3宽度 -->
      <aside class="lg:col-span-1 space-y-6">
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-4">补充信息</h3>
            <p class="mb-4">HTML标签示例：&lt;p&gt; 这是一个段落标签 &lt;/p&gt;</p>
            <img
                src="https://picsum.photos/seed/html/400/300"
                alt="HTML代码示例图片"
                class="w-full h-auto rounded-lg mb-4 shadow-sm hover:shadow-md transition-shadow"
            >
            <p>
              更多信息可参考
              <a
                  href="https://developer.mozilla.org/zh-CN/docs/Web/HTML"
                  target="_blank"
                  class="text-blue-600 hover:underline flex items-center gap-1"
              >
                <span>MDN HTML文档</span>
                <i class="fa fa-external-link text-xs"></i>
              </a>
            </p>
          </div>
        </div>
      </aside>
    </main>

    <!-- 页脚 -->
    <footer class="mt-12 py-6 border-t border-gray-200">
      <div class="container mx-auto px-4 text-center text-gray-500">
        <p>© 2025 我的HTML学习笔记</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
// 如果需要导入组件或使用Vue特性，可以在这里添加
// 例如：
// import { ref, onMounted } from 'vue'
// const count = ref(0)
// onMounted(() => { console.log('Component mounted') })
</script>

<style scoped>
/* 如果需要添加自定义样式，可以在这里添加 */
/* 不过建议优先使用Tailwind类 */
</style>
